<template>
    <div>
        <h1>首页</h1>
        <!-- 设置一个盒子 盒子必须包含 id 和尺寸 -->
        <div id="myEcharts1" style="width: 400px;height: 300px;"></div>
        <div id="myEcharts2" style="width: 300px;height: 300px;"></div>
        <div id="myEcharts3" style="width: 400px;height: 300px;"></div>
    </div>
</template>

<script>
import * as echarts from "echarts"
import api from '@/api'
export default {
    data() {
        return {
            myEcharts1Option: {},
            myEcharts2Option: {},
            myEcharts3Option: {}
        }
    },
    mounted() {
        this.getAllInfo();
        this.getGoodTeacher();
        this.getStudentJiuYe()
    },

    methods: {
        async getAllInfo() {
            let res = await api.getAllInfo();
            if (res?.code == 200) {
                this.myEcharts1Option = res.option;
                this.myEcharts1Option.title = {
                    text: '数量信息',
                    left: 'center'
                },
                    this.initMYeCharts("#myEcharts1", this.myEcharts1Option)
            }
        },
        async getGoodTeacher() {
            let res = await api.getGoodTeacher();
            if (res?.code == 200) {
                this.myEcharts2Option = res.option;
                this.myEcharts2Option.title = {
                    text: '教师好评统计表',
                    left: 'center'
                },
                    this.initMYeCharts("#myEcharts2", this.myEcharts2Option)
            }
        },
        async getStudentJiuYe() {
            let res = await api.getStudentJiuYe();
            if (res?.code == 200) {
                this.myEcharts3Option = res.option;
                this.initMYeCharts("#myEcharts3", this.myEcharts3Option)
            }
        },
        initMYeCharts(tagger, options) {
            let myEcharts = echarts.init(document.querySelector(tagger));
            myEcharts.setOption(options)

        }
    }
}
</script>

<style lang="scss" scoped>
#myEcharts1,
#myEcharts2 ,
#myEcharts3{
    float: left;
    margin: 0 0 0 50px;
}
</style>